import React from 'react';
import { View, Image, TouchableWithoutFeedback, ActivityIndicator } from 'react-native';
import { Lt, Color, Label, Jpp, Jx, Touch, Images } from "./_utils";
import { ShareCombine } from './home/ShareCombine';
import { cHome } from './home/_home';
import { ViewImages, ViewMoment, LabelContent, TouchHiden } from './ViewMoments';
import { Carousel, Overlay } from './_teaset';

// 每日爆款 单元
export class ViewCarousels extends React.Component{
    constructor(props){
        super(props);
        const { datas, defaultIndex } = this.props;
        this.state = { datas, actIdx : defaultIndex };

        this.onChange = this.onChange.bind(this);
    }
    // 请求推广信息
    fetConver(i){
        let { datas, onData } = this.state;
        if(!datas[i].imageCombine && !datas[i].qrcode){
            cHome.toConver(datas[i], r=>{
                datas[i].qrcode = r.qrcode;
                this.setState({datas})
                onData && onData(datas);
            });
        }
    }
    // 合成商品图
    onShotCombine(i, imageCombine){
        let { datas, onData } = this.state;
        datas[i].imageCombine = imageCombine;
        this.setState({datas});
        onData && onData(datas);
    }
    // 翻页
    onChange(i){
        this.fetConver(i);
    }
    renderCarousel(i, data){
        const { actIdx } = this.state;
        if(data.imageCombine){
            return <View key={i} style={{flex:1, backgroundColor:"white", justifyContent:"center", alignItems:"center"}}>
                <Image
                    style={{width:Jpp.width-Lt.pad, height:Jpp.height-Lt.pad}} 
                    source={{uri:data.imageCombine}} 
                    resizeMode={"contain"}
                />
            </View>
        }
        if(i == actIdx){
            this.fetConver(i);
        }
        if(!data.qrcode){
            return <View  key={i} style={{flex:1, backgroundColor:"white"}}/>;
        }
        console.warn(data.qrcode);
        return <View  key={i} style={{flex:1}}>
            <ShareCombine
                style={{position:"absolute"}}
                delta = {700}
                data = {data}
                image = {data.imgUrl}
                qrcode = {data.qrcode}
                onShot = {img=>this.onShotCombine(i, img)}
            />
            <View style={{position:"absolute", width:Jpp.width, height:Jpp.height, backgroundColor:"white"}}/>
            {/* <ActivityIndicator style={{alignSelf:"center"}} size={'large'} animating={ true }/> */}
        </View>
    }
    render(){
        const { datas, actIdx } = this.state;
        const { onClose } = this.props;

        return  <View style={{flex:1}}>
            <Carousel
                style = {{flex:1}}
                onChange = {this.onChange}
                control = {true}
                carousel = {false}
                cycle = {false}
                startIndex = {actIdx}
            >
            {
                datas.map((v, i)=>{
                    return this.renderCarousel(i, v);
                })
            }
            </Carousel>
            <Touch style={{position:"absolute"}} onPress={onClose}>
                <Image source={Images.back_sp} style={{margin:20}}/>
            </Touch>
        </View> 
    }
}


export class ViewHotDaily extends React.PureComponent{
    constructor(props){
        super(props);
        const { datas } = this.props;
        this.state = { datas, hiden : true,};

        this.onAlbum = this.onAlbum.bind(this);
    }
    // 相册浏览模式
    onAlbum(idx){
        const { datas } = this.state;
        this.carouselRef = Overlay.show(<Overlay.View modal={false}>
            <ViewCarousels 
                datas={datas} 
                defaultIndex={idx}
                onData = {datas=>this.setState({datas})}
                onClose={()=>Overlay.hide(this.carouselRef)}
            />
        </Overlay.View>);
    }
    render(){
        const { source, title, date, onShare, content, images} = this.props;
        const { hiden, datas } = this.state;
        return <ViewMoment
            source = {source}
            title = {title}
            date = {date}
            onPress = {()=>{ onShare && onShare(datas)}}
        >
            <LabelContent hiden={hiden}>{content}</LabelContent>
            <ViewImages hiden={hiden} images={images} onAlbum={this.onAlbum}/>
            <TouchHiden onHiden={hiden=>this.setState({hiden})}/>
        </ViewMoment>;
    }
}